<template #default>
  <view class="ui-statistic">
    <view class="ui-statistic-item" v-for="(item, index) in data" :key="index">
      <view class="ui-statistic-item-row">
        <view class="numStyle ui-statistic-num">
          {{item.value}}
        </view>
        <view class="ui-statistic-unit gray-text">
          {{item.unit}}
        </view>
      </view>
      <view class="gray-text">
        {{item.name}}
      </view>
      <view class="ui-statistic-line" v-if="index < data.length - 1">
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    required: false,
  }
})
</script>

<style scoped lang="scss">
.numStyle {
  color: var(--fui-color-primary);
  font-weight: bold;
}

.gray-text {
  font-size: 24rpx;
  font-weight: 400;
  color: #666666;
}

.ui-statistic {
  display: flex;
  justify-content: space-around;
  width: 100%;
  background: #ffffff;
  padding: 24rpx;
  box-sizing: border-box;
  border-radius: 16rpx;

  &-line {
    position: absolute;
    right: 0;
    width: 2rpx;
    height: 46rpx;
    background-color: #dbdbdb;
    border-radius: 2rpx;
  }

  &-num {
    font-size: 48rpx;
  }

  &-unit {
    margin-left: 4rpx;
    margin-bottom: 8rpx;
  }

  &-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10rpx;

    &-row {
      display: flex;
      align-items: flex-end;
      margin-bottom: 2rpx;
    }
  }
}
</style>